<template>
	<!-- groupbuy团购详情 -->
	<view class="wp">
		<!-- 分享按钮 -->
		<view @click="share" class="pub_share">分享</view>
		<view class="shop_imgs">
			<swiper class="s_swiper" :circular="true" :autoplay="true" :indicator-dots="false" @change="setDot">
				<swiper-item class="swiper_item" v-for="(item,idx) in info.thumb_url" :key="idx">
					<image class="swiper_img" :src="item" @click="previewImg(info.thumb_url,idx)" />
				</swiper-item>
			</swiper>
			<view class="s_dots">
				<text>{{dotImg}}</text>/
				<text>{{info.thumb_url.length}}</text>
			</view>
		</view>
		<view class="s_body">
			<view class="sale">
				<view class="money">
					<text class="s_m">{{info.saleprice}}<text class="little" v-if="info.cardnum!=0">/{{info.cardnum||0}}次</text></text>
					<text class="little" v-if="info.cardnum>0">单次{{formattedPrice}}</text>
					<text class="old_m">{{info.productprice}}</text>
					<text class="label" v-if="info.limitnumstr">{{info.limitnumstr}}次</text>
				</view>
				<view class="num">已售{{info.sales||0}}份</view>
			</view>
			<view class="s_card">
				<view class="s_num" v-if="info.cardnum>0">次卡</view>
				<view class="label" v-if="info.mark&&info.mark!='NAN折'"><image src="/static/zhekou.png"></image><text>{{info.mark}}</text></view>
				<view v-if="info.cardnum>0">可在【我的】＞【次卡包】中多次核销使用</view>
				<text class="label">最高排队补贴{{Number(info.btrate)}}%</text>
			</view>
			<view class="title">{{info.title}}</view>
			<!-- 门店 -->
			<view class="my_shop" v-if="info.supplier.uid" @click="$navTo('/pages/shoplist/shopgoods?id='+info.supplier.uid)">
				<image :src="info.supplier.logo" ></image>
				<view class="s_info">
					<view class="title clamp"><text class="s_tag" v-if="info.isstore==1">自营仓</text>{{info.supplier.supname}}</view>
					<view class="time">营业时间：{{info.supplier.saletime||0}}</view>
					<view class="address">
						<text class="cont clamp" selectable>{{info.supplier.supaddress}}</text>
						<text style="color:#8405dc;flex:1;margin-left:8rpx;white-space: nowrap;" v-if="info.isstore==0">|&nbsp;距您{{info.supplier.length}}</text>
						<view style="display: flex;margin-top: -60rpx;" v-if="info.isstore==0">
							<view @click.stop="openMap(info.supplier)">
								<uni-icons type="paperplane-filled" size="26"></uni-icons>
							</view>
							<view style="margin-left: 2rpx;" @click.stop="openPhone(info.supplier.mobile)">
								<uni-icons type="phone-filled" size="26"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="block" v-if="false">
				<block v-if="info.isstore==1">
					<view class="title">
						到店自提
					</view>
					<view style="color: #666;">23点前下单，次日11点前<text style="color:#8615E1;">就近门店自提</text><text style="color:red;padding-left:10rpx">距您{{pickupSelcted.distance}}</text></view>
					<!-- <view class="ztd">
						<view>{{pickupSelcted.title}} | 距您{{pickupSelcted.distance}}</view>
						<view class="ztd_icon">
							<view @click.stop="openMaps(pickupSelcted)">
								<uni-icons type="paperplane-filled" size="20"></uni-icons>
							</view>
							<view style="margin-left: 24rpx;" @click.stop="openPhone(pickupSelcted.mobile)">
								<uni-icons type="phone-filled" size="20"></uni-icons>
							</view>
						</view>
					</view> -->
				</block>
				<block v-else>
					<view class="title" v-if="info.validday != '0'">
						可用日期
					</view>
					<view style="color: #666;">有效期：购买后{{info.validday||0}}天内有效 ▪ 过期自动退 ▪ 随时退</view>
				</block>
				<view class="title" v-if="info.usermaxbuy != '0'">
					限购数量
				</view>
				<view style="color: #666;" v-if="info.usermaxbuy != '0'">每人最多买{{info.usermaxbuy||0}}份</view>
				<view class="title" v-if="storeList&&storeList.length>0">
					适用门店
				</view>
				<view class="store_info" v-if="storeList&&storeList.length>0">
					<view class="clamp"><text>{{storeList.length}}家通用▪</text>最近{{storeList[0].distance}}▪{{storeList[0].supname}}</view>
					<view class="s_all" @click="openStore">全部门店></view>
				</view>
			</view>
			<view class="vip_open" v-if="cardShow" style="background-image: url('https://img.jinghushi.com/images/9/2024/06/f671OCl8c1abACjCfliPilLaP6C6I7.png');">
				<view class="vip_open_left">
					<view class="vip_tit">全国联盟免通卡</view>
					<view>此套餐仅限超级VIP使用</view>
				</view>
				<view class="vip_open_btn" @click="$navTo('/pages/user/flow')">立即开通</view>
			</view>
			<view class="block">
				<view class="title">
					购买须知
				</view>
				<view class="list" style="color: #666;font-size: 24upx;line-height: 40rpx;padding-top: 8rpx;">
					<view v-for="item in info.rulelist">{{item.content}}</view>
					<view>{{info.rule}}</view>
				</view>
			</view>
			<view class="block">
				<view class="title">
					【团购详情】
				</view>
				<view class="list" v-for="(item,idx) in info.markList" :key="idx">
					<view class="tit">{{item.title}}</view>
					<view class="row" v-for="(it,id) in item.list" :key="id">
						<text class="name">●&nbsp;&nbsp;{{it.title}}</text>
						<text class="num">({{it.num}}份)</text>
						<text class="price">￥{{Number(it.price)}}</text>
					</view>
				</view>
				<!-- <view class="list">
					<rich-text :nodes="info.content"></rich-text>
				</view> -->
				<view class="list" v-if="info.content.length>0&&info.content[0]!==''">
					<!-- <view class="tit">图片详情</view> -->
					<image v-for="(item,idx) in info.content" :key="idx" class="thumber" :src="item" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="block" v-if="moreList.length>0&&info.supplier.uid">
				<view class="top">
					<view class="title">更多本地团购({{moreList.length}})</view>
					<view @click="$navTo('/pages/shoplist/shopgoods?id='+info.supplier.uid)" style="color:#666;">
						去看看 <image src="/static/jiantou1.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="more_list">
					<view class="more_item" v-for="(item,idx) in moreList" v-if="idx<3" @click="$navTo('/pages/product/groupbuy?id='+item.id)">
						<view class="m_logo">
							<image :src="item.thumb"></image>
						</view>
						<view class="m_title">{{item.title}}</view>
						<text class="m_new">￥{{item.saleprice}}<text class="m_old">￥{{item.productprice}}</text></text>
					</view>
				</view>
			</view>
		</view>
		<view class="pub_sharebg" v-if="shareimg!=''" @tap="shareimg = ''">
			<!-- #ifdef APP-PLUS||MP-WEIXIN||MP-ALIPAY -->
			<image @longpress.stop="toSave" :src="shareimg" mode="widthFix"></image>
			<!-- #endif -->
		</view>
		<uni-popup ref="popup" :is-mask-click="false" style="z-index:99999">
			<view class=""
				style="text-align: center;background-color: #fff;border-radius: 20upx;padding: 30upx;line-height: 70upx;">
				<view class="" style="padding-bottom: 30upx;font-size: 32upx;">
					一键注册，立减现金
				</view>
				<button style="font-size: 28upx;" open-type="getPhoneNumber"
					@getphonenumber="getUserProfile">去授权</button>
			</view>
		</uni-popup>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" :value="mid" before-close="true" mode="input" title="推荐人ID" placeholder="请输入推荐人ID" @confirm="dialogInputConfirm" @close="closeDialog"></uni-popup-dialog>
		</uni-popup>
		<!-- 底部按钮 -->
		<view class="goods-carts">
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick" @buttonClick="toBuy" />
		</view>
		<group-popup v-if="popu" :info="info" @tobuy="toBuy" @tobuyReal="toBuyReal"/>
		<!-- #ifdef APP-PLUS||MP-WEIXIN -->
		<suspension :videoUrl="info.vodurl" :isMask="true" :goodsid="id" :masktit="'视频讲解'"></suspension>
		<!-- #endif -->
		<view class="gomask" v-if="isMask">
			<view class="maskTit">
				<view>点击下方，前往小程序</view>
				<image src="/static/zhixiang.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 适用门店列表 -->
		<uni-popup ref="storepopup" :is-mask-click="true" type="bottom" :safe-area="false">
			<view class="stores">
				<view class="s_tit">
					<view>适用门店（{{storeNum}}家）</view>
					<!-- <image src="/static/close.png" @click="closeStorePop"></image> -->
				</view>
				<scroll-view scroll-y="true" class="s_alls">
					<view class="s_a_item" v-for="item in storeList" @click="$navTo('/pages/shoplist/shopgoods?id='+item.uid)">
						<view class="s_a_left">
							<view class="clamp">{{item.supname}}</view>
							<view class="s_a_info">
								<text class="s_a_dis">距离{{item.distance}}</text>
								<text>{{item.shortaddress}}</text>
								<text>￥{{item.avgsale}}/人</text>
							</view>
							<view class="s_a_time">营业时间 {{item.saletime}}</view>
						</view>
						<view class="s_a_right">
							<view class="s_a_r_it" @click.stop="openMaps(item)">
								<image src="/static/addre.png"></image>
								<view>导航</view>
							</view>
							<view class="s_a_r_it" @click.stop="openPhone(item.principalmobile)">
								<image src="/static/dianhua.png"></image>
								<view>联系商家</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="bind" type="dialog" :is-mask-click="false">
			<view class="nobind">
				<view>您还未绑定手机号</view>
				<button class="l_w_login" open-type="getPhoneNumber" @getphonenumber="bindMobile">绑定手机号</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import groupPopup from '@/components/groupPopup.vue';
	import suspension from "@/components/suspension.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		components: { suspension,groupPopup },
		data() {
			return {
				id: '',
				dotImg: 1,
				shareimg: '',
				mid: 0,
				popu: false,
				info: {
					buyprice: "",
					content: [],
					markList: [],
					productprice: "",
					rule: "",
					saleprice: "",
					thumb: "",
					thumb_url: [],
					title: "",
					total: "",
					timeend: "",
					sales: '',
					isfavorite: false,
					mark: '',
					shareprice:'',
					supplier: {
						logo: "",
						saletime: "",
						supaddress: "",
						supname: "",
						uid: "534"
					}
				},
				options: [{
					icon: 'star',
					text: '收藏',
				}],
				customButtonGroup: [{
					text: '暂无法购买',
					backgroundColor: 'rgba(80,80,80,.6)',
					color: '#efe7e7'
				}],
				moreList: [],
				isClick: false,
				isMask: false,
				pickupSelcted: [],
				storeList: [],
				storeNum: 0,
				isVip: 0,//是否为购买Vip礼包
				cardShow:false,
				isBind: true,
			}
		},
		async onLoad(options) {
			if (options.id) {
				this.id = options.id;
			}
			if (options.scene) {
				let scene = decodeURIComponent(options.scene);
				this.id = this.gup('goodsid', scene);
				this.mid = this.gup('mid', scene);
			}
			if(options.mid){
				this.mid = options.mid;
			}
			console.log(this.mid);
			if(options.isVip){
				this.isVip = options.isVip
			}
			if(uni.getLaunchOptionsSync().scene == 1154){
				this.isMask = true;
			}else{
				this.isMask = false;
			}
			this.getInfo();
			if(!uni.getStorageSync('token')){
				this.getToken();
			}else{
				this.getMobile();
			}
			this.getLocation();
			await this.$onLaunched;
			// this.getMoreShop();
			// this.getStoreList();
		},
		computed: {
		  formattedPrice() {
		    return parseFloat((this.info.saleprice/this.info.cardnum).toFixed(2))
		  },
		  	...mapState(['Location'])
		},
		methods: {
			getLocation(){
				let that = this;
				/* #ifdef MP-WEIXIN */
				uni.startLocationUpdateBackground({
					type: 'gcj02',
					success() {
						uni.onLocationChange(function(res) {
							console.log('成功',res)
							that.$store.commit('upLocation', {
								x: res.longitude,
								y: res.latitude
							})
							uni.setStorageSync('x',res.longitude);
							uni.setStorageSync('y',res.latitude);
							// that.getInfo();
							that.$isResolve();
						});
					},
					fail(err) {
						uni.startLocationUpdate({
							success: res => {
								uni.onLocationChange(function(res) {
									console.log('失败',res)
									that.$store.commit('upLocation', {
										x: res.longitude,
										y: res.latitude
									})
									uni.setStorageSync('x',res.longitude);
									uni.setStorageSync('y',res.latitude);
									// that.getInfo();
									that.$isResolve();
								});
							},
							fail: err => {
								that.$isResolve();
							}
						});
					}
				});
				/*#endif*/
				/* #ifdef MP-ALIPAY */
				uni.getLocation({
					type: '0',
					success:res=> {
						console.log('成功',res)
						that.$store.commit('upLocation', {
							x: res.longitude,
							y: res.latitude
						})
						uni.setStorageSync('x',res.longitude);
						uni.setStorageSync('y',res.latitude);
						that.$isResolve();
					}
				});
				/* #endif */
			},
			
			// 门店列表
			getStoreList(){
				this.$axios('groupgoods/groupGoodsSupList','POST','shop',{
					id: this.id
				}).then(res=>{
					if(res.data.code == 200){
						this.storeList = res.data.data.list;
						this.storeNum = res.data.data.num;
					}
				})
			},
			closeStorePop(){
				this.$refs.storepopup.close()
			},
			openStore(){
				this.$refs.storepopup.open()
			},
			getToken(){
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success:res=> {
						this.$axios('login/autologin','POST','member',{
							mid: this.mid,
							code: res.code
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								// this.getInfo();
								// this.getMoreShop();
								this.getMobile();
								this.getSharePath();
							}
						})
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.getAuthCode({
				    scopes: 'auth_base',
				    success: res => {
						this.$axios('login/autologinAliPay','POST','member',{
							mid: this.mid,
							code: res.authCode
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getSharePath();
							}
						})
					}
				})
				// #endif
			},
			getMoreShop(){
				this.$axios('groupgoods/moreGroup','POST','shop',{
					id: this.id
				}).then(res=>{
					if(res.data.code==200){
						this.moreList = res.data.data;
					}
				})
			},
			openPhone(v){
				uni.makePhoneCall({
					phoneNumber: v //仅为示例
				});
			},
			toBuy(){
				if(!this.isClick) return;
				if(this.isBind){
					if(this.info.cardnum==0){
						this.popu = !this.popu;
					}else{
						this.toBuyReal(1);
					}
				}else{
					this.$refs.bind.open();
				}
			},
			toBuyReal(val){
				console.log(val)
				let isGroupBuy;//是否为团购商品 1为团购 2为次卡
				if(!this.isClick) return;
				if (!uni.getStorageSync('token')) {
					this.$refs.popup.open();
					return;
				}
				if(this.info.cardnum>0){
					isGroupBuy = 2;
				}else{
					isGroupBuy = 1;
				}
				// uni.navigateTo({
				// 	url: '/pages/order/createOrder?type=2&id='+this.id+'&optionid=0&total='+val+'&isGroupBuy=1&isVip=1'
				// })
				if(this.info.isstore==1){
					if(this.isVip == 1){
						uni.navigateTo({
							url: '/pages/order/createOrder?type=2&id='+this.id+'&optionid=0&total='+val+'&isGroupBuy='+isGroupBuy+'&isVip='+this.isVip
						})
					}else{
						uni.navigateTo({
							url: '/pages/order/createOrder?type=3&id='+this.id+'&optionid=0&total='+val+'&isGroupBuy='+isGroupBuy+'&isVip='+this.isVip
						})
					}
				}else{
					uni.navigateTo({
						url: '/pages/order/createOrder?type=2&id='+this.id+'&optionid=0&total='+val+'&isGroupBuy='+isGroupBuy
					})
				}
			},
			getMobile(){
				var that = this;
				that.$axios('Info/member_info', "POST", 'member').then(res => {
					if (res.data.code = 200) {
						if(res.data.data.member.mobile==''||res.data.data.member.mobile.length<1||res.data.data.member.mobile===null||res.data.data.member.mobile==undefined){
							that.isBind = false;
						}else{
							that.isBind = true;
						}
					}
				})
			},
			bindMobile(e) {
				let that = this;
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes);
						let obj = e.detail;
						obj.code1 = loginRes.code;
						that.$axios('bindmobile/bmobile', "POST", 'member', obj).then(res => {
							if (res.data.code == 200) {
								that.$refs.bind.close();
								that.isBind = true;
							}else if(res.data.code==40001){
								that.$refs.inputDialog.open();
							}
						})
					},
					fail() {
						that.$api.msg('登录失败，请重试！')
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.getPhoneNumber({
					success: (res) => {
						let encryptedData = res.response;
						that.$axios('bindmobile/bmobilealipay', "POST", 'member', {
							code: JSON.parse(encryptedData).response
						}).then(res => {
							if (res.data.code == 200) {
								if (res.data.code == 200) {
									that.$refs.bind.close();
									that.isBind = true;
								}else if(res.data.code==40001){
									that.$refs.inputDialog.open();
								}
							}
						})
					},
					fail: (res) => {
						console.log(res);
						that.$api.msg('绑定失败，请重试！')
					},
				});
				// #endif
			},
			getUserProfile(e) {
				let that = this;
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let obj = e.detail;
						obj.code1 = loginRes.code;
						obj.mid = that.mid;
						that.$axios('login/xcxlogin', "POST", 'member', obj).then(
							res => {
								if (res.data.code == 200) {
									uni.setStorageSync('token', res.data.data);
									that.$refs.popup.close();
								}else if(res.data.code==40001){
									that.$refs.inputDialog.open();
								}
							})
					},
					fail() {
						that.$api.msg('登录失败，请重试！')
					}
				})
				// #endif
			},
			dialogInputConfirm(value){
				let that = this;
				if(!value) return that.$api.msg('请输入推荐人ID');
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.$axios('login/bindmid','POST','member',{
							code: loginRes.code,
							agentid: value
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								that.$refs.popup.close();
								that.$refs.inputDialog.close();
							}
						})
					},
					fail() {
						that.$api.msg('登录失败，请重试！')
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.getAuthCode({
				      scopes: 'auth_base',
				      success: res => {
						this.$axios('login/bindmidAlipay','POST','member',{
							code: res.authCode,
							agentid: value
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								that.$refs.popup.close();
								that.$refs.inputDialog.close();
							}
						})
					}
				})
				// #endif
			},
			closeDialog(){
				this.$refs.inputDialog.close();
			},
			getInfo() {
				let obj = {
					...this.Location,
					...{
						id: this.id
					}
				}
				this.$axios('groupgoods/goodsInfo', 'POST', 'shop', obj).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						this.options[0].icon = this.info.isfavorite ? 'star-filled' : 'star';
						if(this.info.canbuy==1){
							if(this.info.total==0){
								this.isClick = false;
								this.customButtonGroup = [{
									text: '商品无库存',
									backgroundColor: 'rgba(80,80,80,.6)',
									color: '#efe7e7'
								}]
							}else{
								this.isClick = true;
								this.customButtonGroup = [{
									text: '立即购买',
									backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
									color: '#fff'
								}]
							}
						}else{
							this.isClick = false;
							// if(this.info.buylevels==1){
								this.customButtonGroup = [{
									text: '商品暂无法购买',
									backgroundColor: 'rgba(80,80,80,.6)',
									color: '#efe7e7'
								}]
							// }
						}
						// 如果为无忧卡专区的商品
						if(this.info.buycrad==1){
							this.cardShow = true;
						}
						// if(this.info.isstore==1){
						// 	this.getZtdInfo();
						// }
					}else{
						this.$api.msg(res.data.data);
					}
				})
			},
			// 获取自提点列表
			getZtdInfo(){
				this.$axios('paymarket/getPickups', 'POST', 'order', this.Location).then(res => {
					if (res.data.code == 200) {
						this.pickupSelcted = res.data.data.list[0];
					}
				})
			},
			previewImg(logourl, number) {
				uni.previewImage({
					current: number,
					urls: logourl,
				});
			},
			setDot(v) {
				this.dotImg = v.detail.current + 1;
			},
			openMap(v) {
				uni.openLocation({
					latitude: parseFloat(v.lat),
					longitude: parseFloat(v.lng),
					scale: 15,
					name: v.supname,
					address: v.supaddress,
				});
			},
			openMaps(v){
				uni.openLocation({
					latitude: parseFloat(v.y),
					longitude: parseFloat(v.x),
					scale: 15,
					name: v.title,
					address: v.address,
				});
			},
			share: function() {
				var that = this;
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				this.$axios('detail/create_goods_poster', "POST", 'shop', {
					goodsid: that.id
				}).then(res => {
					if (res.data.code == 200) {
						that.shareimg = res.data.data.url
					}
					uni.hideLoading();
				}, (error) => {

				})
			},
			toSave() {
				var that = this;
				uni.showModal({
					title: '图片保存',
					content: '确定要保存图片吗',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.shareimg,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '图片保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								},
								fail(e) {
									console.log(e)
								}
							});
						}
					}
				});
			},
			onClick(e) {
				if (!uni.getStorageSync('token')) {
					this.$refs.popup.open();
					return;
				}
				if (e.index === 0) {
					this.$axios('favorite/set', "POST", 'shop', {
						id: this.id
					}).then(res => {
						if (res.data.code == 200) {
							this.info.isfavorite = res.data.data.isfavorite;
							this.options[0].icon = this.info.isfavorite ? 'star-filled' : 'star';
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}
	.vip_open{
		height: 132rpx;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		margin-top: 20rpx;
		.vip_open_left{
			flex: 1;
			color: #B9B7A7;
			font-size: 24rpx;
			image{
				width: 110rpx;
				margin-bottom: 6rpx;
			}
		}
		.vip_tit{
			color:#ffe9b5;
			font-size: 34rpx;
			font-weight: bold;
			margin-bottom: 12rpx;
		}
		.vip_open_btn{
			width: 176rpx;
			line-height: 62rpx;
			background: linear-gradient( 90deg, #FFE9B7 0%, #FBE3A0 100%);
			border-radius: 31rpx;
			color: #412116;
			font-weight: 600;
			text-align: center;
		}
	}
	.l_w_login{
		background: #eee;
	}
	.wp {
		padding-bottom: 120upx;
	}
	.shop_imgs {
		position: relative;
		// z-index: 100;
		// padding: 0px 0px ;
		.s_swiper {
			width: 100%;
			height: 480rpx;
			.swiper_item{
				display: flex;
				justify-content: center;
				align-content: center;
				overflow: hidden;
			}
			.swiper_img {
				width: 100%;
				height:100%;
			}
		}
		.s_dots {
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 30upx;
			font-size: 22upx;
			padding: 10upx 20upx;
			color: #fff;
			position: absolute;
			right: 20upx;
			bottom: 50upx;
		}
	}

	.s_body {
		position: relative;
		background-color: #f8f8f8;
		border-radius: 30upx;
		top: -20px;
		// z-index: 990;
		padding: 0 20upx;
		.s_card{
			display: flex;
			margin-bottom: 20rpx;
			font-size: 24upx;
			color: #666;
			align-items: center;
			.s_num{
				background: #000;
				color: #f3dd91;;
				padding: 0 11rpx;
				border-radius: 8rpx;
				line-height: 1.6;
				margin-right: 8rpx;
			}
		}
		.sale {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0 0;

			.money {
				text {
					margin-right: 10upx;
				}

				.s_m {
					color: #AF141D;
					font-size: 46upx;

					&:before {
						content: '￥';
						font-size: 24upx;
					}
				}
				.little{
					font-size: 24rpx;
					color: red;
				}
				.old_m {
					color: #666;
					font-size: 26rpx;
					text-decoration: line-through;

					&:before {
						content: '￥';
					}
				}
			}
			
			.num {
				color: #999;
				font-size: 24upx;
			}
		}
		.label {
			color: #750CD5;
			background-color: rgba(117, 12, 213, 0.2);
			border-radius: 4px;
			padding: 2upx 4upx;
			letter-spacing: 1px;
			display: inline-block;
			margin-right: 8rpx;
			image{
				width: 18rpx;
				height: 22rpx;
			}
		}
		.title {
			color: #000;
			font-size: 34upx;
			font-weight: bold;
			letter-spacing: 1px;
		}
		.store_info{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			.clamp{
				flex: 1;
				padding-right: 10rpx;
				text{
					color: $bg-color;
				}
			}
			.s_all{
				font-size: 24rpx;
				color: #999999;
			}
		}
		.block {
			background-color: #fff;
			border-radius: 20upx;
			padding: 20upx;
			margin-top: 20upx;

			.title {
				color: #000;
				font-size: 30upx;
				font-weight: bold;
			}
			.ztd{
				font-size: 26rpx;
				color:#666;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.ztd_icon{
					display: flex;
					align-items: center;
				}
			}
			.list {
				padding-top: 20upx;

				.tit {
					color: #000;
					font-size: 26upx;
					font-weight: bold;
				}

				.row {
					color: #303133;
					display: flex;
					align-content: center;
					font-size: 26upx;
					line-height: 60upx;

					.name {
						flex: 4;
					}

					.num {
						color: #999;
						font-size: 24upx;
						flex: 1;
						text-align: right;
					}

					.price {
						flex: 1;
						text-align: right;
					}
				}

				.thumber {
					border-radius: 20upx;
					margin-top: 20upx;
					width: 100%;
				}
			}
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				image{
					width: 20rpx;
					margin-left: 5rpx;
				}
			}
			.more_list{
				display: flex;
				margin-top: 16rpx;
				margin-right: -15rpx;
				.more_item{
					width: 210rpx;
					margin-right: 15rpx;
					.m_logo{
						width: 100%;
						height: 210rpx;
						overflow: hidden;
						border-radius: 14rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.m_title{
						margin: 5rpx 0 10rpx 0;
						height: 74rpx;
						overflow: hidden;
						font-size: 28rpx;
					}
					.m_new{
						color: red;
						.m_old{
							text-decoration: line-through;
							font-size: 22rpx;
							color: #999;
							margin-left: 8rpx;
						}
					}
				}
			}
		}

		.my_shop {
			background: #fff;
			border-radius: 30upx;
			display: flex;
			margin-top: 20upx;
			padding: 20upx 0 20rpx 20rpx;

			image {
				border-radius: 20upx;
				height: 120upx;
				width: 120upx;
			}

			.s_info {
				padding-left: 16upx;
				line-height: 40upx;
				width: calc(100% - 130upx);

				.title {
					color: #000;
					font-weight: bold;
					letter-spacing: 1px;
					display: flex;
					align-items: center;
					.s_tag{
						display: inline-block;
						background: #000;
						color: #F3DD91;
						border-radius: 8rpx;
						padding: 0 6rpx;
						font-size: 20rpx;
						font-weight: normal;
						height: 34rpx;
						line-height: 34rpx;
						margin-right: 10rpx;
						margin-top: 2rpx;
						float: left;
						letter-spacing: 0;
					}
				}
				.time {
					color: #666;
					font-size: 26upx;
				}
			}

			.address {
				display: flex;
				font-size: 26upx;
				align-items: center;
				justify-content: space-between;

				.cont {
					// width: calc(100% - 70upx);
				}
			}
		}
	}
	.uni-popup {
		z-index: 1000!important;
	}
	.stores{
		background: #fbf8fe;
		border-radius: 16rpx 16rpx 0 0;
		padding: 20rpx;
		padding-bottom: 40rpx;
		.s_tit{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: 600;
			image{
				width: 22rpx;
				height: 22rpx;
			}
		}
		.s_alls{
			height: 700rpx;
			padding: 20rpx 0;
			.s_a_item{
				height: 166rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #999999;
				padding: 0 20rpx;
				margin-bottom: 20rpx;
				.s_a_left{
					flex: 1;
					line-height: 44rpx;
					.clamp{
						font-weight: 600;
						color: #333333;
						font-size: 30rpx;
					}
					.s_a_info{
						display: flex;
						
						.s_a_dis{
							color: #333333;
						}
						text{
							margin-right: 10rpx;
						}
					}
				}
				.s_a_right{
					display: flex;
					text-align: center;
					.s_a_r_it{
						margin-left: 40rpx;
						image{
							width: 40rpx;
							height: 40rpx;
							margin-bottom: 10rpx
						}
					}
				}
			}
		}
	}
	.goods-carts {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 999;
	}
	.suspension{
		.s_pack{
			position: relative;
			border-radius: 10rpx;
			overflow: hidden;
			width: 200rpx;
			height: 350rpx;
			video{
				width: 100%;
				height: 100%;
			}
			.s_tit{
				position: absolute;
				width: 100%;
				line-height: 1.5;
				background: $bg-color;
				bottom: 0;
				left: 0;
				color: #fff;
				text-align: center;
				z-index: 1;
				font-size: 24rpx;
			}
			.close{
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				right: 0;
				top: 0;
				border-bottom-left-radius: 10rpx;
				background: rgba(200,200,200,.7);
				text-align: center;
				z-index: 3;
				image{
					width: 20rpx;
					display: block;
					margin: 6rpx auto;
				}
			}
			.mask{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
		}
	}
</style>